<template>
  <app-container>
    <app-block>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item>
          <zm-form-item>
            <zm-data-select
              v-model="searchForm.messageType"
              :list="messageTypeList"
              placeholder="消息类型"
              class="w150"
              clearable
              multiple
              str
            ></zm-data-select>
          </zm-form-item>
          <zm-form-item>
            <zm-form-item>
              <zm-data-select
                v-model="searchForm.tabType"
                :list="tabTypeList"
                placeholder="消息状态"
                class="w150"
                clearable
              ></zm-data-select>
            </zm-form-item>
          </zm-form-item>
        </zm-form-item>
        <zm-form-item>
          <zm-button type="primary" @click="getList" t="search"></zm-button>
          <zm-button type="success" @click="onChangeReaded">全标已读</zm-button>
        </zm-form-item>
      </zm-form>
      <el-card
        shadow="hover"
        class="mt10 fs14"
        v-for="(item, index) in msgData.list"
        :key="index"
      >
        <div slot="header">
          <tag-type
            :value="item.isLook === '1' ? '3' : '4'"
            :show-text="false"
          ></tag-type>
          <span>【{{ item.messageTypeName }}】</span>
          <span>{{ item.messageName }}</span>
          <span class="fr fc9">{{ item.createTime }}</span>
        </div>
        <div>
          <span class="ml15">{{ item.content }}</span>
          <zm-button class="fr" size="mini" type="text" @click="checkDetail(item)">
            查看详情
          </zm-button>
        </div>
      </el-card>
      <zm-page-bar
        class="mt15 tr"
        :total="msgData.count"
        @size-change="getPageSize"
        @current-change="getCurrentPage"
      ></zm-page-bar>
    </app-block>
    <detail-container
      v-if="extendDetailParams.visible"
      v-model="extendDetailParams.visible"
      :id="extendDetailParams.id"
      :business-id="extendDetailParams.businessId"
      :is-draft="extendDetailParams.isDraft"
      :type="extendDetailParams.type"
      :is-sold-product="extendDetailParams.isSoldProduct"
      @load-list="getList"
      :draft-id="extendDetailParams.draftId"
      :return-order-id="extendDetailParams.returnOrderId"
      :is-approve-template="extendDetailParams.isApproveTemplate"
    ></detail-container>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import TagType from '@/components/TagType'
import systemMessageApis from '@/api/src/systemMessage'
import DetailContainer from './components/DetailCantainer'

export default {
  name: 'Control',
  components: { TagType, DetailContainer },
  mixins: [tableMixin],
  data () {
    return {
      searchForm: {
        messageType: '',
        tabType: '0'
      },
      paginationParams: {
        page: '1',
        pageSize: '10'
      },
      messageTypeList: [
        {
          name: '产品配置审批',
          value: '1'
        },
        {
          name: '销售单审批',
          value: '2'
        },
        {
          name: '退货审批',
          value: '3'
        },
        {
          name: '产品激活',
          value: '5'
        },
        {
          name: '回款审批',
          value: '4'
        },
        {
          name: '全部回款',
          value: '6'
        },
        {
          name: '逾期提醒',
          value: '7'
        },
        {
          name: '移入公海',
          value: '8'
        },
        {
          name: '转移客户',
          value: '9'
        },
        {
          name: '客户分配',
          value: '10'
        },
        {
          name: '客户跟进',
          value: '11'
        }
      ],
      tabTypeList: [
        {
          name: '全部',
          value: '0'
        },
        {
          name: '未读',
          value: '1'
        },
        {
          name: '已读',
          value: '2'
        }
      ],
      msgData: {
        list: [],
        count: 0
      },
      extendDetailParams: {
        visible: false,
        id: '',
        businessId: '',
        type: '',
        returnOrderId: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      console.log('msgInform-getList')
      const res = await systemMessageApis.getList({...this.searchForm, ...this.paginationParams})
      this.msgData = res
    },
    // 全标已读
    onChangeReaded () {
      this.$confirm('是否将未读消息全部标记为已读状态？', '确认提示')
        .then(async () => {
          await systemMessageApis.read({isAll: '1'})
        })
        .catch(err => err)
    },
    // 查看详情
    async checkDetail (current) {
      await systemMessageApis.read({messageIds: current.id})
      let _obj = {}
      const isApproveTemplateValueList = ['1', '2', '3', '4']
      // 审批类型的参数配置
      if (isApproveTemplateValueList.includes(current.messageType)) {
        _obj = {
          type: current.processType.toString(),
          isApproveTemplate: true,
          id: current.businessId
        }
      } else {
        let detailID
        // if (['99'].includes(current.messageType)) {
        //   detailID = current.businessId
        // } else {
        //   detailID = current.fromId
        // }
        detailID = current.fromId
        _obj = {
          type: current.messageType.toString(),
          isApproveTemplate: false,
          id: detailID,
          businessId: current.fromId
        }
      }
      this.extendDetailParams = {
        visible: true,
        businessId: current.businessId,
        draftId: current.draftId,
        isSoldProduct: current.processType === '2',
        isDraft: true,
        returnOrderId: current.orderId,
        ..._obj
      }
    },
    // 获取每页条数
    getPageSize (val) {
      this.$set(this.paginationParams, 'pageSize', val.toString())
      this.getList()
    },
    // 获取当前页
    getCurrentPage (val) {
      this.$set(this.paginationParams, 'page', val.toString())
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
